import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
import Jour from "./Jour.js"
import AjaxPicture from "./AjaxPicture.js"
import More from "./More.js"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			"username":"",
			"avatar":"",
			"fd":"",
			"ajaxFileCount":0,
			"base64":[],
			"sign":"",
			showOffSend:false,
			"showOffSign":false,
			"j":"",
			"jour":[]
		}
	}

	//得到后台过来的自己的说说
	componentWillMount(){
		let This=this
		//得到username和avatar和说说内容
		$.post("/getMyShuoshuo",function(data){
				if(data==="-1"){
					return ;
				}
				else{
					This.setState(data)
					return ;
				}
		})
	}
	
	componentDidMount(){
		//这是主页和发说说按钮动画的移入移除
		$(".href-btn").find("div").hover(function(){
			$(this).addClass("rubberBand")
		},function(){
			$(this).removeClass("rubberBand")
		})

		//监听input的file的事件变化
		let file=$(this.ajaxFileEl)
		file.on("change",(e)=>this.readFile(e))

		//让ajax异步传送的图片的高随宽而动
		$(window).on("resize",function(){
			let aImg=$(".img-ajax-parent").find("img")
			let width=$(aImg[0]).innerWidth()
			aImg.height(width+"px")
		})
		
	}

	//读文件函数，随change事件而动
	readFile(){
		let This=this
		let fd = new FormData()
		let result=[]
		let files=this.ajaxFileEl.files
		let picLen=files.length
		for(let i=0;i<picLen;i++){
			//前台给后端的已经准备好了
			fd.append(i,files[i])
			//在前端展示所选中的图片
			var reader = new FileReader();  
            reader.readAsDataURL(files[i]); 
 			reader.onload = function(){  
	            //图片DOM已经生成  this.result是base64图片数据
	            // let pic=$("<img src='"+this.result+"' alt='图片' />")
	            // result.push(1)
	            let base64=This.state.base64.concat()
	            base64.push(this.result)
	            This.setState((prev)=>{
	            	return({
	            		base64:base64,
	            		ajaxFileCount:++prev.ajaxFileCount
	            	})
	            })
			}
		}
		this.setState({
			fd:fd
		})	
	}

	//发送说说的ajax
	send(event){
		let This=this
		let content=$(this.sendtextarea).val()
		let pictureLen=this.state.ajaxFileCount
		let fd=null
		if((!(parseInt(pictureLen)>0))&&content.length==0)
			return ;
		if(parseInt(pictureLen)>0){
			fd=this.state.fd
		}else{
			fd=new FormData()
		}
		if(content.length!=0){
			fd.append("jourContent",content)
		}
		this.setState({
			ajaxFileCount:0,
			fd:"",
			showOffSend:false
		})
		$.ajax({  
            url : '/sendJour',  
            type : 'post',  
            data : fd,  
            dataType: 'json',  
            processData: false,   //用FormData传fd时需有这两项  
            contentType: false,  
            success : function(data){  
				if(data.length>1){
					alert(data)
				}   
		    }   
        }) 	
	}

	//显示发送说说的模态框
	offWrite(){
		this.setState({
			showOffSend:true
		})
		let el=$(this.sendAnimation)
		el.removeClass("fadeOutUp")
		el.addClass("fadeInDown")
	}

	//隐藏发送说说的模态框
	closeSend(){
		let el=$(this.sendAnimation)
		el.removeClass("fadeInDown")
		el.addClass("fadeOutUp")
		setTimeout(()=>{
			this.setState({
				showOffSend:false
			})
		},250)
	}
	//显示全部的sign
	showSignAll(e){
		let left=e.clientX
		let top=e.clientY
		let el=$(this.signAllEl)
		el.css({
			left:left,
			top:top
		})
		el.fadeIn(300)
	}

	//隐藏全部的sign
	hideSignAll(){
		$(this.signAllEl).fadeOut(300)
	}

	//点击显示修改签名框动画
	setSign(){
		if(!this.state.showOffSign){
			$(this.hr).fadeIn(300)
			$(this.offsign).slideDown(300)
		}else{
			$(this.hr).fadeOut(400)
			$(this.offsign).slideUp(300)
		}
		this.setState({
			showOffSign:!this.state.showOffSign
		})
	}

	//提交修改签名的ajax
	submitSign(){
		let This=this
		let textarea=$(this.textarea)
		let val=textarea.val()
		if(val.trim().length===0){
			return;
		}
		let oldVal=this.state.sign
		textarea.val(" ")
		this.setSign()
		this.setState({
			sign:val
		})
		$.post("/setSignAjax",{
			val:val
		},function(data){
			if(data==="-1"){
				alert("修改签名失败")
				This.setState({
					sign:oldVal
				})
			}
		})
	}

	render(){
		return (
			<div className="container-fluid container-full-screen">
				<div className="fixedbg"></div>
				<div className="href-btn">
					<div onClick={(e)=>window.location="/"} style={{cursor:"pointer"}} className="animated">
						HOME
					</div>
					<hr style={{margin:"0",padding:"0"}}/>
					<div onClick={(e)=>this.offWrite(e)} style={{cursor:"pointer"}} className="animated">
						WRITE
					</div>
				</div>
				<div 
					ref={(sendAnimation)=>this.sendAnimation=sendAnimation}
					style={{display:this.state.showOffSend?" ":"none"}} 
					className="send-box animated"
					onDoubleClick={(e)=>this.closeSend(e)}
				>
					<div style={{width:"600px",margin:"30px auto"}}>
							<div id="placeholderarea">
								<textarea  
									id="textarea"
									ref={(textarea)=>this.sendtextarea=textarea} 
									className="form-control" 
									rows="5"  
									placeholder="请输入内容"
									name="textarea"
								>

								</textarea>
							</div>
							<div className="img-ajax-parent row">
								{this.state.base64.map(function(val,index){
									if(index>11)
										return ;
									if(index===11) 
										return <More />
									return < AjaxPicture  src={val} key={index} />
								})}
							</div>
							<div style={{position:"relative"}}>
								<span className="xuan-file">选中文件</span>
								<span className="file-count"> {this.state.ajaxFileCount} 个文件</span>
								<input style={{position:"absolute",opacity:"0"}} ref={(ajaxFileEl)=>this.ajaxFileEl=ajaxFileEl} type="file" name="file" multiple/>
							</div>
							<input 
								className="content-right-submit" 
								onClick={this.send.bind(this)}
								width="50px" 
								height="25px" 
								type="submit" 
								value="发送"
							/>
					</div>
				</div>
				<span ref={(signAllEl)=>this.signAllEl=signAllEl} className="sign-all-el">
					{this.state.sign}
				</span>
				<div 
					className="content"
				>
					<div className="row">
							<div className="content-left col-lg-4 col-lg-push-1 col-md-4 col-md-push-1 col-sm-5 col-xs-5">
								<img className="img-thumbnail img-responsive" src={"/img/"+this.state.avatar} alt="大头像"/>
								<div className="content-left-username content-left-relief" >{this.state.username}</div>
								<div className="content-left-relief content-left-sign">
									{this.state.sign.slice(0,36)}
									<span 
										style={{position:"relative",display:this.state.sign.length>36?" ":"none"}}
										onMouseEnter={(e)=>this.showSignAll(e)}
										onMouseLeave={(e)=>this.hideSignAll(e)}
									>
										...
									</span>
									&nbsp;&nbsp;&nbsp;
									<span 
										style={{cursor:"pointer",fontSize:"16px"}}
										onClick={(e)=>this.setSign(e)}
									>
											修改
									</span>
								</div>
								<hr ref={(hr)=>this.hr=hr} style={{display:"none"}}/>
								<div ref={(offsign)=>this.offsign=offsign} style={{width:"100%",height:"180px",display:"none"}}>
									<div id="placeholderarea">
										<textarea ref={(textarea)=>this.textarea=textarea} rows="5"  className="form-input form-control" placeholder="输入小伙伴username"></textarea>
									</div>
									<div className="full-left set-sign set-sign-parent" onClick={(e)=>this.submitSign(e)} >
										提交
									</div>
								</div>
							</div>
							<div style={{display:this.state.jour?"":"none"}} className="content-left-jour col-lg-5 col-lg-push-5  col-md-5 col-md-push-5 col-sm-7 col-sm-push-5 col-xs-7 col-xs-push-5">
								{this.state.jour.map((val,index)=>{
									if(!val.jourUserName) return ;
									return <Jour jour={val} key={index}/>
								})} 
							</div>
							
					</div>
				</div>
			</div>
		)
			
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));

//还原区
// src={"/img/"+this.state.avatar}   小头像和大头像



